<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 100px;
				height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div>
			<img src="../01.基础篇/file/mmexport1558785726041.jpg" alt="" />
			<input type="button" value="全屏" id="full">
			<input type="button" value="退出全屏" id="cancelfull">
			<input type="button" value="是否全屏" id="isfull">
		</div>

		<script>
			window.onload = function() {
				var div = document.querySelector("div")
				document.querySelector("#full").onclick = function() {
					if (div.requestFullscreen) {
						div.requestFullscreen()
					} else if (div.webkitRequestFullscreen) {
						div.webkitRequestFullscreen();
					} else if (div.mozRequestFullscreen) {
						div.mozRequestFullscreen()
					} else if (div.msRequestFullscreen) {
						div.msRequestFullscreen()
					}
				}
			
				document.querySelector("#cancelfull").onclick = function() {
					 console.log(document.cancelFullscreen)
					if (document.cancelFullscreen) {
						document.cancelFullscreen()
					} else if (document.webkitCancelFullscreen) {
						document.webkitCancelFullscreen();
					} else if (document.mozCancelFullscreen) {
						document.mozCancelFullscreen()
					} else if (document.msCancelFullscreen) {
						document.msCancelFullscreen()
					}
				}
							
			}
		</script>
	</body>
</html>